<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    canvas {
      width: 100vw;
      height: 100vh;
      display: block;
    }
  </style>
  <body>
    <canvas id="c"></canvas>
    <script id="vertex-shader-2d" type="notjs">

        attribute vec2 a_position;
 
        uniform vec2 u_resolution;
       
        void main() {
          // 从像素坐标转换到 0.0 到 1.0
          vec2 zeroToOne = a_position / u_resolution;
       
          // 再把 0->1 转换 0->2
          vec2 zeroToTwo = zeroToOne * 2.0;
       
          // 把 0->2 转换到 -1->+1 (裁剪空间)
          vec2 clipSpace = zeroToTwo - 1.0;
       
          //gl_Position = vec4(clipSpace, 0, 1);
          //翻转
          gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
        }
    </script>

    <script id="fragment-shader-2d" type="notjs">

      // 片段着色器没有默认精度，所以我们需要设置一个精度
      // mediump是一个不错的默认值，代表“medium precision”（中等精度）
      precision mediump float;

      void main() {
        // gl_FragColor是一个片段着色器主要设置的变量
        gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“瑞迪施紫色”
      }
    </script>
  </body>
  <script src="../webgl-utils.js"></script>
  <script src="./index2.js" type="text/javascript"></script>
</html>
